<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>布局网格 Layout grids-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/formats/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>布局网格 Layout grids</h1>
				<div class="desc">
                <div>因为屏幕通常都比较窄，所以使用多栏布局的方法在移动设备上不是推荐的方法。但是总有时候你会想要把一些小的元素并排放置（比如按钮，或导航标签)</div>
				<div>Jquery Mobile框架提供了一种简单的方法构建基于css的分栏布局，叫做ui-grid</div>
  <hr />
  <div>Jquery Mobile提供了两种预设的配置布局：两列布局（class 含有 ui-grid-a）和三列布局 （class 含有 ui-grid-b）—几乎可满足需要列布局的任何情况。网格是100%宽的，不可见（没有背景或边框），也没有padding和margin，所以它们不会影响内部元素的样式</div>  
  </div>
					<h1>两栏布局 Two column grids</h1>
				<div class="desc">
                <div>要构建两栏的布局（50/50%），先构建一个父容器，添加一个class名字为：ui-grid-a,内部设置两个字容器，分别给第一个子容器添加class：ui-block-a，第二个子容器添加class：ui-block-b</div>
                
  </div>	
				<div class="code">&lt;div class=&quot;ui-grid-a&quot;&gt;<br /> 
				  　
&lt;div class=&quot;ui-block-a&quot;&gt;&lt;strong&gt;I'm Block A&lt;/strong&gt; and text inside will wrap&lt;/div&gt;<br /> 
　
&lt;div class=&quot;ui-block-b&quot;&gt;&lt;strong&gt;I'm Block B&lt;/strong&gt; and text inside will wrap&lt;/div&gt;<br />
&lt;/div&gt;&lt;!-- /grid-a --&gt;</div>
  	<img src="../../images/Layout grids_0.png" tppabs="http://www.jqmapi.com/images/Layout%20grids_0.png">
					<div class="desc">
                <div>如上所见，默认的两栏没有样式，并行排列。分栏的class可以应用到任何类型的容器上。下一个实例中，我们给表单的fieldset添加class=&quot;ui-grid-a&quot;，然后给两个button的所在的子容器添<br />
class=&quot;ui-block-a&quot;和class=&quot;ui-block-b&quot;。使两个容器各自50%的宽</div>
  	<img src="../../images/Layout grids_1.png" tppabs="http://www.jqmapi.com/images/Layout%20grids_1.png">
                <div>在下面的区块中，我们增加了两个class,增加ui-bar的class给默认的bar padding，增?ui-bar-e的class应用背景渐变以及工具栏的主题e的字体样式。然后在每个网格的标签内增加style="height:120px"的属性来设置高度</div>  
  	<img src="../../images/Layout grids_2.png" tppabs="http://www.jqmapi.com/images/Layout%20grids_2.png">        
  </div>
  
	<h1>三栏布局 Three-column grids</h1>
    
    <div class="desc">
                <div>另一种布局的方式是三栏布局，给父容器添加”class="ui-grid-b"，然后分别给三个字容器添?加 class="ui-block-a"，“class="ui-block-b"，”class="ui-block-c"</div></div>
				<div class="code">&lt;div class=&quot;ui-grid-b&quot;&gt;<br /> 
				  　
&lt;div class=&quot;ui-block-a&quot;&gt;Block A&lt;/div&gt;<br /> 
　
&lt;div class=&quot;ui-block-b&quot;&gt;Block B&lt;/div&gt;<br /> 
　
&lt;div class=&quot;ui-block-c&quot;&gt;Block C&lt;/div&gt;<br />
&lt;/div&gt;&lt;!-- /grid-a --&gt;</div>
        <p class="indent">就会生成一个 33/33/33% 的分栏布局</p>
      	<img src="../../images/Layout grids_3.png" tppabs="http://www.jqmapi.com/images/Layout%20grids_3.png"> 
        <p class="indent">3列网格布局里面是按钮的示例</p>
<img src="../../images/Layout grids_4.png" tppabs="http://www.jqmapi.com/images/Layout%20grids_4.png">  

<div class="desc">
                <div>以此类推：如果是4栏布局，则给父容器添加class="ui-grid-c"（2栏为a，3栏为b, 4栏为c, 5栏为d。。。。），子容器分别添加class="ui-block-a"，”class="ui-block-b" “class="ui-block-c".....</div></div>
        
        
	<h1>多行的网格布局 Multiple row grids</h1>
    
<div class="desc">
                <div>网格化布局也适用于多栏布局的方式，比如，如果你指定了一列布局的父容器，里面有9个子容器，则会包裹为3行，每行3个。可以给每行的第一个容器设置为class=ui-block-a来清除浮动，这样9个子容器的class应为：class=ui-block-(a,b,c,a,b,c,a,b,c)重复</div></div>
<img src="../../images/Layout grids_6.png" tppabs="http://www.jqmapi.com/images/Layout%20grids_6.png">  
</div>
</div>

</body>
</html>



